<template>
  <div>
    <div class="user-main-box">
      <div
        v-if="isAgent === 1"
        class="tologin normal-tologin"
        @click="goLoginSystem"
      >
        登录管理系统
      </div>
      <div class="form-input-area" style="position: relative">
        <Spin v-if="loading" :with-icon="true"></Spin>

        <div class="flx-row-s-c div-line long-name-nece">
          <div class="long-name">网站名称</div>
          <Input
            v-model.trim="siteName"
            placeholder="请输入网站名称"
            maxlength="30"
            style="width: 200px"
          />
        </div>

        <div class="flx-row-s-c div-line long-name-nece">
          <div class="long-name">姓名</div>
          <Input
            v-model.trim="name"
            placeholder="请输入姓名"
            maxlength="30"
            style="width: 200px"
          />
        </div>

        <div class="flx-row-s-c div-line">
          <div class="flx-row-s-c long-name-nece">
            <div class="long-name">会员ID(手机号)</div>
            <Input
              v-model.trim="memberID"
              placeholder="请输入会员(手机号)"
              maxlength="30"
              style="width: 200px"
            />
          </div>

          <span class="c-r" style="margin-left: 12px"
            >会员等级:{{ memberlevel }}</span
          >
        </div>

        <div class="flx-row-s-c div-line long-name-nece">
          <div class="long-name">Email</div>
          <Input
            v-model.trim="email"
            placeholder="请输入邮箱地址"
            maxlength="30"
            style="width: 200px"
          />
        </div>

        <div class="flx-row-s-c div-line">
          <div class="long-name">微信号</div>
          <Input
            v-model.trim="wechatNum"
            placeholder="请输入微信号"
            maxlength="30"
            style="width: 200px"
          />
        </div>

        <div class="flx-row-s-c div-line">
          <div class="long-name">公司名称</div>
          <Input
            v-model.trim="company"
            placeholder="请输入公司名称"
            maxlength="30"
            style="width: 200px"
          />
        </div>

        <div class="flx-row-s-c div-line">
          <div class="long-name">国家/地区</div>
          <Select v-model="country" style="width: 150px; margin-right: 10px">
            <Option
              v-for="(item, index) in countryList"
              :key="'p' + index"
              :value="item.countryNameCn"
              >{{ item.countryNameCn }}</Option
            >
          </Select>
          <Select
            v-model="province"
            style="width: 150px; margin-right: 10px"
            @on-change="changeProvince"
          >
            <Option
              v-for="(item, index) in addressList"
              :key="'p' + index"
              :value="item.value"
              >{{ item.label }}</Option
            >
          </Select>
          <Select
            v-if="province != null && province != ''"
            v-model="city"
            style="width: 150px; margin-right: 10px"
          >
            <Option
              v-for="item in cityList"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">详细地址</div>
          <Input
            v-model.trim="address"
            placeholder="请输入详细地址"
            maxlength="30"
            style="width: 200px"
          />
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">免费二级域名</div>
          <Input
            v-model.trim="sid"
            placeholder="请输入免费二级域名"
            maxlength="30"
            style="width: 200px"
          />
          <span class="c-d2" style="margin-left: 6px">.190.vip</span>
        </div>

        <div
          class="user-strong-button submit-button-style pub-m-l-145"
          @click="submit"
        >
          确认
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { changelocation } from "@/utils/location.js";
import { getAddress, applytoAgent, getagentLogin } from "@/api/user";
export default {
  name: "VipMyapplication",
  components: {
    // userTabList: () => import("_c/tabList/userTabList"),
  },
  //   layout: "user",
  data() {
    return {
      loading: false,

      // 表单数据
      name: "",
      memberID: "",
      memberlevel: "", // 会员等级
      wechatNum: "",
      email: "",
      company: "",
      countryList: [],
      addressList: [],
      cityList: [],
      address: "",
      sid: "", // 二级域名
      country: "中国", // 国家
      province: "", // 省
      city: "", // 市
      region: "", // 区
      isAgent: 0,
      agentAdminUrl: "",
      siteName: "", //申请网站
    };
  },
  head() {
    return {
      title: this.defaultTdk.title,
      meta: [
        { name: "keywords", content: this.defaultTdk.keywords },
        { name: "description", content: this.defaultTdk.description },
      ],
    };
  },
  computed: {
    ...mapGetters({ defaultTdk: "getDefaultTdk" }),
  },
  watch: {
    "$store.state.user.getBaseInfo": {
      handler(newValue) {
        if (newValue) {
          this.getuserInfo();
        }
      },
    },
  },
  created() {
    if (this.$store.state.user.getBaseInfo) {
      this.getuserInfo();
    }
  },
  mounted() {
    this.getAddressList();
  },
  methods: {
    // 获取省市区
    async getAddressList() {
      const { code, data } = await getAddress();
      if (code === 200 && data) {
        // 国家
        this.countryList = data.dictCountryList;
        // 地区
        this.addressList = data.dictVOList;
        if (this.province) {
          for (const i in this.addressList) {
            if (this.addressList[i].value === this.province) {
              if (
                this.addressList[i].value === "天津市" ||
                this.addressList[i].value === "北京市" ||
                this.addressList[i].value === "重庆市" ||
                this.addressList[i].value === "上海市"
              ) {
                this.cityList = this.addressList[i].children[0].children.concat(
                  this.addressList[i].children[1].children
                );
              } else {
                this.cityList = this.addressList[i].children;
              }
            }
          }
        }
      }
    },
    changeProvince() {
      for (const i in this.addressList) {
        if (this.addressList[i].value === this.province) {
          if (
            this.addressList[i].value === "天津市" ||
            this.addressList[i].value === "北京市" ||
            this.addressList[i].value === "重庆市" ||
            this.addressList[i].value === "上海市"
          ) {
            this.cityList = this.addressList[i].children[0].children.concat(
              this.addressList[i].children[1].children
            );
          } else {
            this.cityList = this.addressList[i].children;
          }
        }
      }
      this.city = "";
    },
    getuserInfo() {
      this.name = this.$store.state.user.username;
      this.memberID = this.$store.state.user.account;
      this.email = this.$store.state.user.email;
      this.wechatNum = this.$store.state.user.wechatNum;
      this.company = this.$store.state.user.company;
      this.province = this.$store.state.user.province;
      this.city = this.$store.state.user.city;
      this.region = this.$store.state.user.region;
      this.address = this.$store.state.user.address;
      this.isAgent = this.$store.state.user.isAgent;
      this.agentAdminUrl = this.$store.state.user.agentAdminUrl;
      this.memberlevel = this.$store.state.user.levelName;
    },

    // 提交表单
    async submit() {
      if (this.siteName == null || this.siteName === "") {
        this.$Message.warning("请输入申请网站！");
        return;
      }
      if (this.name == null || this.name === "") {
        this.$Message.warning("请输入姓名！");
        return;
      }
      if (this.memberID == null || this.memberID === "") {
        this.$Message.warning("请输入会员(电话)！");
        return;
      }
      if (this.email == null || this.email === "") {
        this.$Message.warning("请输入邮箱地址！");
      }

      const data = {
        address: this.address,
        city: this.city,
        company: this.company,
        country: this.country,
        email: this.email,
        province: this.province,
        sld: this.sid,
        wxNum: this.wechatNum,
        siteName: this.siteName,
      };

      const res = await applytoAgent(data);
      if (res.code === 200) {
        this.$Message.success("申请成功");
        this.$router.push("/user/myapplication/record");
      }
    },
    async goLoginSystem() {
      this.current = true;
      const list = {};
      const { code, data } = await getagentLogin(list);
      if (code === 200 && data) {
        window.open(changelocation("/agent/") + "?token=" + data);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user-main-box {
  position: relative;
  cursor: pointer;
  .tologin {
    position: absolute;
    left: 330px;
    top: -57px;
    display: inline-block;
    margin: 0 25px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 60px;
    border-bottom: transparent 2px solid;
    transition: border-color 0.3s, color 0.3s;
  }
  .normal-tologin {
    color: #000;

    &:hover {
      color: $mainColor;
    }
  }
}
</style>
